{# Stalker Pyramid a Web Base Production Asset Management System
 Copyright (C) 2009-2014 Erkan Ozgur Yilmaz

 This file is part of Stalker Pyramid.

 This library is free software; you can redistribute it and/or
 modify it under the terms of the GNU Lesser General Public
 License as published by the Free Software Foundation;
 version 2.1 of the License.

 This library is distributed in the hope that it will be useful,
 but WITHOUT ANY WARRANTY; without even the implied warranty of
 MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
 Lesser General Public License for more details.

 You should have received a copy of the GNU Lesser General Public
 License along with this library; if not, write to the Free Software
 Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301 USA
#}
{% extends "base.jinja2" %}

{# BREADCRUMBS #}
{% block breadcrumbs %}
    {% set page_title='Shots' %}
    {% include 'breadcrumb/breadcrumbs.jinja2' %}
{% endblock breadcrumbs %}

{# SIDEBAR #}
{% block sidebar %}
    {% include 'sidebar.jinja2' %}
{% endblock sidebar %}

{# PAGE-CONTENT #}
{% block page_content %}

    {% set page_title='Shots' %}
    {% include 'page_header.jinja2' %}

    <div id="loading_spinner" class="well well-sm">

        <div class="inline middle blue bigger-110"><i
                class="icon-spinner icon-spin orange bigger-125"></i> Loading
            content...
        </div>
    </div>
    <div id="content" class="widget-box hide">
        <div class="widget-header widget-header-small header-color-shot">
            <h5 id="items_header" class="smaller"></h5>

            <div class="widget-toolbar">
                {% if has_permission('Create_Shot') %}

                    &nbsp
                    <a data-target="#dialog_template"
                       data-toggle="modal"
                       data-keyboard=false
                       href="{{ request.route_url("create_shot_dialog", id=-1, _query={'project_id': entity.id }) }}"
                       class="white">
                        <i class="icon-plus"></i>
                        New
                    </a>
                    &nbsp&nbsp

                {% endif %}
                <a href="#" data-action="collapse">
                    <i class="icon-chevron-down"></i>
                </a>
            </div>

        </div>
        <div class="widget-body">
            <div class="widget-main no-padding">

                <table id="shots_table"
                       class="table table-striped table-bordered table-hover">

                    <thead>
                    <tr id="shots_table_column">
                        <th>Sequence</th>
                        <th>Status</th>
                        <th>Thumbnail</th>
                        <th>Name</th>
                    </tr>
                    </thead>
                    <tbody>

                    </tbody>

                </table>

            </div>
        </div>
    </div>



{% endblock page_content %}

{#                {{ if (it.delete_shot_action) { }}#}
{#                <a class="red pull-right"#}
{#                   data-target="#dialog_template"#}
{#                   data-toggle="modal"#}
{#                   data-keyboard=false#}
{#                   href="{{=it.delete_shot_action}}?came_from={{=it.came_from }}">#}
{#                    <i class="icon-trash bigger-130"></i>#}
{#                </a>{{ } }}<br/>#}

{# EXTRA-SCRIPTS #}
{% block extrascripts %}
    <script src='{{ request.static_url("stalker_pyramid:static/ace/js/jquery.dataTables.min.js") }}'></script>
    <script src='{{ request.static_url("stalker_pyramid:static/ace/js/jquery.dataTables.bootstrap.js") }}'></script>
    <script src='{{ request.static_url("stalker_pyramid:static/stalker/js/dataTable_num-html_sort.js") }}'></script>

    {% raw %}
    <script id="tmpl_shotColumn" type="text/x-dot-template">
        <th>{{=it.name}}</th>
    </script>
    {% endraw %}

    {% raw %}
    <script id="tmpl_shotRow" type="text/x-dot-template">
        <tr id="shot_row_{{=it.id}}">
            <td style="width:20px;">
                <a href='/tasks/{{=it.sequence_id}}/view'>{{=it.sequence_name}}</a><br/>
            </td>
            <td style="width:20px;"><span
                    class="label label-{{=it.status_color}}">{{=it.status}}</span><br/><br/>
            </td>
            <td>
                <img style='width:auto; height: 100px;'
                     class="img-thumbnail"
                     src="{{=it.thumbnail_full_path }}">
            </td>
            <td id="shot_summary_cell_{{=it.id}}">
                <a href='{{=it.link}}'>{{=it.name}}</a>
                {{ if (it.update_shot_action) { }}
                <a class="blue pull-right"
                   data-target="#dialog_template"
                   data-toggle="modal"
                   data-keyboard=false
                   href="{{=it.update_shot_action}}">
                    <i class="icon-edit bigger-130"></i>
                </a>{{ } }}<br/>
                {{=it.description}}<br/>
            </td>
        </tr>
    </script>
    {% endraw %}

    {% raw %}
    <script id="tmpl_shotSummaryCell" type="text/x-dot-template">
        <a class="red"
           data-target="#dialog_template"
           data-toggle="modal"
           data-keyboard=false
           href="{{=it.link}}">{{=it.name}}, </a>

    </script>
    {% endraw %}

    {% raw %}
    <script id="tmpl_taskCell" type="text/x-dot-template">
        <td class="no-padding" style="width:120px;">
            <div class="{{=it.status_color}}"
                 style="width:120px; height:105px; padding:5px;">
                <span>
                    <a class="white" href="/tasks/{{=it.id }}/view">{{=it.name}}</a>

                    {{ if (it.update_shot_action) { }}
                    <a class="white pull-right"
                       data-target="#dialog_template"
                       data-toggle="modal"
                       data-keyboard=false
                       href="/tasks/{{=it.id }}/update/dialog">
                        <i class="icon-edit bigger-130"></i>
                    </a>{{ } }}<br/><br/><br/>

                    {{ if (it.percent_complete!='') { }}
                        {{=it.status}}
                        <div class="progress progress-success no-padding">
                                <div style="width:{{=it.percent_complete}}%" class="bar">
                                    <span>{{= it.percent_complete}}%</span>

                                </div>
                         </div>
                    {{ } else {}}

                        <br/>
                        {{=it.status}}
                    {{ } }}

                </span>



            </div>
        </td>
    </script>
    {% endraw %}



    <script>
        $(document).ready(function () {

            var icon_name = get_icon('shot');
            $('#items_header').append('<i class=' + icon_name + '></i>');
            // fill shots table with dynamic data
            $.getJSON('/shots/children/task_type/').then(function (types_data) {

                var types = types_data;
                var column_template = doT.template($('#tmpl_shotColumn').html());

                $(function () {
                    var k;
                    var table_column = $('#shots_table_column');
                    for (k = 0; k < types_data.length; k++) {

                        // append it to the table
                        table_column.append(column_template(types[k]));
                    }


                    $.getJSON('/entities/{{ entity.id }}/shots/').then(function (data) {

                        var shots = data;
                        var shot_template = doT.template($('#tmpl_shotRow').html());


                        // wait until document is ready
                        $(function () {
                            var i;
                            var table_body = $('#shots_table>tbody');
                            for (i = 0; i < data.length; i++) {

                                data[i].link = '/shots/' + data[i].id + '/view';

                                if (data[i].thumbnail_full_path == null) {
                                    data[i].thumbnail_full_path = '{{ request.static_url("stalker_pyramid:static/stalker/images/T_NO_IMAGE.gif") }}';
                                }
                                else {
                                    data[i].thumbnail_full_path = '/' + data[i].thumbnail_full_path;
                                }

                                data[i].came_from = '{{ request.current_route_path() }}'


                                // append it to the table
                                table_body.append(shot_template(data[i]));

                                var cell_template = doT.template($('#tmpl_taskCell').html());

                                var shot_row = $('#shot_row_' + data[i].id);

                                for (var j = 0; j < types_data.length; j++) {

                                    var tasks = data[i][types_data[j].name];


                                    if (tasks) {

                                        var task = tasks[0];

                                        console.log('task '+task[0])

                                        shot_row.append(cell_template({'id': task[0], 'name': task[1], 'status': task[2], 'status_color': task[2].toLowerCase(), 'percent_complete':(task[2]=='WIP'?task[3]:''),'update_shot_action': data[i].update_shot_action}));

                                    } else {
                                        shot_row.append(cell_template({'id': '', 'name': '', 'status': '', 'status_color': 'black2','percent_complete':''}));
                                    }

                                }

                                var shot_summary_cell = $('#shot_summary_cell_' + data[i].id);
                                var shot_summary_cell_template = doT.template($('#tmpl_shotSummaryCell').html());

                                for (var n = 0; n < data[i]['nulls'].length; n++) {
                                    var null_type_task = data[i]['nulls'][n];
                                    shot_summary_cell.append(shot_summary_cell_template({'link': '/tasks/' + null_type_task[0] + '/update/dialog', 'name': null_type_task[1], 'status': null_type_task[2], 'status_color': null_type_task[3]}));
                                }

                            }

                            var oTable1 = $('#shots_table').dataTable();

                            $('#loading_spinner').hide();
                            $('#content').show();

                        });
                    });


                });
            })

        });
    </script>


{% endblock extrascripts %}

